<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>问答页</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1349763_lqrnqlkyikj.css"/>
    <link rel="stylesheet" href="../css/lotto.css"/>
</head>



<body>

<!--标题-->
<section class="title" flex="main:center">
    <img src="../img/title1.png"/>
</section>


<!--问答-->

<!--1-->
<section class="question">
    <div class="que-title" flex="cross:center">
        <img src="../img/question1img.png"/>
        <span>您的年龄?</span>
    </div>
    <div class="answer" flex="main:center">
        <div class="answer-left" flex="dir:top">
            <button name="A">18-25</button name>
            <button name="A">35-45</button name>
        </div>
        <div flex="dir:top">
            <button name="A">25-35</button>
            <button name="A">45以上</button>
        </div>
    </div>
</section>


<!--2-->
<section class="question">
    <div class="que-title" flex="cross:center">
        <img src="../img/question2img.png"/>
        <span>平时喜欢喝什么酒？</span>
    </div>
    <div class="answer" flex="main:center">
        <div class="answer-left" flex="dir:top">
            <button name="B">普通啤酒 </button>
            <button name="B">葡萄酒</button>
            <button name="B">鸡尾酒</button>
        </div>
        <div flex="dir:top">
            <button name="B">精酿啤酒</button>
            <button name="B">洋酒</button>
            <button name="B">其他</button>
        </div>
    </div>
</section>


<!--3-->
<section class="question">
    <div class="que-title" flex="cross:center">
        <img src="../img/question3img.png"/>
        <span>经常喝酒吗？</span>
    </div>
    <div class="answer" flex="main:center">
        <div class="answer-left" flex="dir:top">
            <button name="C">偶尔小酌 </button>
            <button name="C">经常豪饮</button>
        </div>
        <div  flex="dir:top">
            <button name="C">常常微醺</button>
            <button name="C">无酒不欢</button>
        </div>
    </div>
</section>


<!--4-->
<section class="question-long">
    <div class="que-title" flex="cross:center">
        <img src="../img/question4img.png"/>
        <span>喜欢在什么场合喝酒？</span>
    </div>
    <div class="answer-long" flex="dir:top cross:center">
        <button name="D">酒吧</button>
        <button name="D">朋友聚会</button>
        <button name="D">一人独饮</button>
    </div>
</section>


<!--5-->
<section class="question-long">
    <div class="que-title" flex="cross:center">
        <img src="../img/question5img.png"/>
        <span>什么时候开始接触精酿？</span>
    </div>
    <div class="answer-long" flex="dir:top cross:center">
        <button name="E">精酿小白</button>
        <button name="E">偶尔有喝</button>
        <button name="E">精酿大神</button>
    </div>
</section>




<!--底部-->
<section class="dibu">
    <div flex="main:center">
        <button id="jump2">提交并开始抽奖</button>
    </div>
    <div class="bottom-img"></div>
</section>

<script src="../js/lotto.js"></script>
</body>
</html>